import React from 'react';
import { Card, Tag, Typography } from 'antd';
import { useCallback } from 'react';

function useCard() {
  const handleCardClick = useCallback((url: string) => {
    // 使用浏览器的导航功能跳转到指定 URL
    window.location.href = url;
  }, []);

  return { handleCardClick };
}

const { Title } = Typography;

interface ClickableCardProps {
  title: string;
  tag1: string;
  tag2: string;
  navigateUrl: string;
}

const ClickableCard: React.FC<ClickableCardProps> = ({ title, tag1, tag2, navigateUrl }) => {
  const { handleCardClick } = useCard();

  return (
    <Card
      style={{ width: 300, cursor: 'pointer' }}
      bodyStyle={{ padding: '16px' }}
      onClick={() => handleCardClick(navigateUrl)} // 点击卡片时跳转
    >
      <Title level={3} style={{ margin: '0 0 16px 0', fontWeight: 'bold' }}>{title}</Title>
      <div style={{ marginBottom: 16 }}>
        <Tag color="blue" style={{ color: 'black', marginRight: 8 }}>
          {tag1}
        </Tag>
        <Tag color="green" style={{ color: 'black' }}>
          {tag2}
        </Tag>
      </div>
    </Card>
  );
};

export default ClickableCard;